<template>
  <div class="pk-table">
    <div class="pk-table-hd">
      <el-table
        :data="data"
        style="width: 100%;"
        border
        size="default"
        v-loading="loading"
        v-bind="$attrs"
        class="custom-table"
        @selection-change="handleSelectionChange"
      >
        <template v-for="(item, index) in tableConfig">
          <el-table-column
            type="selection"
            :width="item.width || '50px'"
            :label="item.label"
            :header-align="headerAlign"
            align="headerAlign"
            v-if="item.type === 'selection'"
            :key="index"
          />
          <el-table-column
            type="index"
            :width="item.width || '60px'"
            :label="item.label"
            v-if="item.type === 'index'"
            :header-align="headerAlign"
            align="headerAlign"
            :key="index"
          />
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width || ''"
            :key="index"
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
            v-if="
              (!item.type || item.type === 'txt') &&
                (item.show == false ? false : true) && !item.children
            "
          >
            <template #default="scope">
              <span
                v-if="
                  scope.row[item.prop] != '' ||
                    scope.row[item.prop] != null ||
                    scope.row[item.prop] != undefined
                "
              >
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :minWidth="item.minWidth || ''"
            :label="item.label"
            v-else-if="
              item.type === 'slot' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
           
          >
            <template #default="scope">
              <slot
                :name="item.slotName"
                :row="scope.row"
                :index="scope.$index"
                :type="item.prop" />
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :label="item.label"
            v-else-if="
              item.type === 'render' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
          >
            <template #default="scope">
              {{ item.render && item.render(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :label="item.label"
            v-else-if="
              item.type === 'button' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
          >
            <template #default="scope">
              <el-button type="text" @click="item.click(scope.row)">{{ scope.row[item.prop] }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :label="item.label"
            v-else-if="
              item.type === 'price' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
          >
            <template #default="scope">
              {{ scope.row[item.prop] || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :label="item.label"
            v-else-if="
              item.type === 'tip' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
          >
            <template #default="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item.prop]"
                placement="top"
              >
                <div class="clamp1">{{ scope.row[item.prop] || "" }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            :width="item.width || ''"
            :label="item.label"
            v-else-if="
              item.type === 'date' && (item.show == false ? false : true)
            "
            :header-align="headerAlign"
            align="headerAlign"
            :fixed="item.fixed || false"
          >
            <template #default="scope">
              <div class="clamp1">{{ scope.row[item.prop] ? scope.row[item.prop].slice(0, 10) : '' }}</div>
            </template>
          </el-table-column>

          <el-table-column
           :label="item.label"
           :header-align="headerAlign"
            v-else-if="item.children && item.children.length > 0"
          >
            <template v-for="(aitem, aindex) in item.children">
              <el-table-column
                type="index"
                :width="aitem.width || '50px'"
                :label="aitem.label"
                v-if="aitem.type === 'index'"
                :header-align="headerAlign"
                align="headerAlign"
                :key="aindex"
              />
              <el-table-column
                :prop="aitem.prop"
                :label="aitem.label"
                :width="aitem.width || ''"
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
                :key="aindex"
                v-if="
                  (!aitem.type || aitem.type === 'txt') &&
                    (aitem.show == false ? false : true)
                "
              >
                <template #default="scope">
                  <span
                    v-if="
                      scope.row[aitem.prop] != '' ||
                        scope.row[aitem.prop] != null ||
                        scope.row[aitem.prop] != undefined
                    "
                  >
                    {{ scope.row[aitem.prop] }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                :width="aitem.width || ''"
                :label="aitem.label"
                v-else-if="
                  aitem.type === 'slot' && (aitem.show == false ? false : true)
                "
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
              >
                <template #default="scope"">
                  <slot
                    :name="aitem.slotName"
                    :row="scope.row"
                    :index="scope.$index"
                    :type="aitem.prop"
                  ></slot>
                </template>
              </el-table-column>
              <el-table-column
                :width="aitem.width || ''"
                :label="aitem.label"
                v-else-if="
                  aitem.type === 'render' && (aitem.show == false ? false : true)
                "
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
              >
                <template #default="scope">
                  {{ aitem.render && aitem.render(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column
                :width="aitem.width || ''"
                :label="aitem.label"
                v-else-if="
                  aitem.type === 'price' && (aitem.show == false ? false : true)
                "
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
              >
                <template #default="scope">
                  {{ scope.row[aitem.prop] || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                :width="aitem.width || ''"
                :label="aitem.label"
                v-else-if="
                  aitem.type === 'tip' && (aitem.show == false ? false : true)
                "
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
              >
                <template #default="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row[aitem.prop]"
                    placement="top"
                  >
                    <div class="clamp1">{{ scope.row[aitem.prop] || "" }}</div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                :width="aitem.width || ''"
                :label="aitem.label"
                v-else-if="
                  aitem.type === 'time' && (aitem.show == false ? false : true)
                "
                :header-align="headerAlign"
                align="headerAlign"
                :fixed="aitem.fixed || false"
              >
                <template #default="scope">
                  <div class="clamp1">{{ scope.row[aitem.prop] ? scope.row[aitem.prop].slice(0, 10) : '' }}</div>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          :width="action.width || '100px'"
          :label="action.label || '操作'"
          v-if="action && action.actionOptons.length > 0"
          :header-align="headerAlign"
          align="headerAlign"
          fixed="right"
        >
        <template slot-scope="scope">
          <div class="flexRow">
            <div v-for="(item, index) in action.actionOptons" :key="index">
              <template v-if="item.popconfirm">
                <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  :title="item.popconfirm.title || '确定要'+item.label+'吗?'"
                  v-bind="item.popconfirmparams"
                  @confirm="actionClick(scope.row, item)"
                >
                  <el-button slot="reference" size="mini" type="text">{{ item.label }}</el-button>
                </el-popconfirm>
              </template>
              <template v-else>
                <el-button
                  size="mini"
                  type="text"
                  @click="actionClick(scope.row, item)"
                  >{{ item.label }}</el-button
                >
              </template>
            </div>
          </div>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pk-table-bd">
      <div v-if="isPage">
        <park-pagination  :total="total" :limit="pageSize" :page="page" @onChange="onPage" size="small"></park-pagination>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
        ></el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue'
import parkPagination from '@/components/pkui/pkpagination/pkpagination.vue'
const props = defineProps({
  iSindex: {
    type: Boolean,
    default: true
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next'
  },
  tableConfig: {
    type: Array,
    default: () => []
  },
  total: {
    type: [String, Number],
    default: 1000
  },
  limit: {
    type: [String, Number],
    default: 10
  },
  highlightCurrentRow: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  },
  isPage: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  action: {
    type: Object,
    default: () => {}
  },
  totalProp:{
    type: String,
    default: ''
  },
  totalUnit:{
    type: String,
    default: '度'
  },
  isTotal: {
    type: Boolean,
    default: false
  },
  headerAlign:{
    type: String,
    default: 'left'
  }
})

const page = ref(1)
// const tableData = ref([])
const pageSize = ref(props.limit)
const selectList = ref([])

watch(() => props.limit, (val) => {
  pageSize.value = val;
})

const emits = defineEmits(['onaction'])

const actionClick = (e, item) => {
  emits('onaction', {
    data: e,
    item
  })
}

const handleSelectionChange = (e) => {
  selectList.value = e;
  emits('handleSelectionChange', e) 
}

const resetPage = () => {
  page.value = 1;
}

const handleSizeChange = (e) => {
  pageSize.value = e
  page.value = 1
  emits('onSize', {
    page: page.value,
    pageSize: pageSize.value
  })
}

const handleCurrentChange = (e) => {
  page.value = e
  emits('onSize', {
    page: page.value,
    pageSize: pageSize.value
  })
}

const onPage = (e) => {
  page.value = e
  emits('onSize', {
    page: page.value,
    pageSize: pageSize.value
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__header .cell{
  color: #000;
  font-weight: normal;
}
.pk-table {
  margin-bottom: 0 !important;
  &-hd {

  }
  &-bd {
    margin-top: 24px;
    text-align: center;
    display: flex;
    justify-content:center;
    align-items: center;
    padding-bottom: 60px;
  }
  &-total{
    color: #999;
  }
}
</style>
